<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>register</title>
</head>
<style>
    body {
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #ffffff;
    }

    .form {
        max-width: 28rem;
        width: 100%;
        background: linear-gradient(to right, #3f51b5, #9c27b0);
        border-radius: 0.75rem;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        padding: 2rem;
        color: white;
    }

    .title {
        font-size: 2rem;
        font-weight: 800;
        text-align: center;
        margin-bottom: 0.5rem;
    }

    .message {
        font-size: 1rem;
        text-align: center;
        margin-bottom: 2rem;
    }

    .form-group {
        position: relative;
        margin-bottom: 1.5rem;
        display: flex;
        justify-content: center;
    }

    .input {
        width: 70%;
        padding: 0.5rem 0;
        border: none;
        border-bottom: 2px solid #e0e0e0;
        background: transparent;
        color: white;
        font-size: 1rem;
    }

    .input::placeholder {
        color: transparent;
    }

    .input:focus {
        outline: none;
        border-bottom-color: #9c27b0;
    }

    .input + span {
        position: absolute;
        top: 0.5rem;
        left: 0;
        font-size: 1rem;
        color: #b0b0b0;
        transition: all 0.2s ease;
        left: calc(15% + 10px); /* Adjust left alignment */
    }

    .input:focus + span,
    .input:valid + span {
        top: -0.8rem;
        font-size: 0.75rem;
        color: #9c27b0;
    }

    .submit {
        display: block;
        width: 70%;
        padding: 0.75rem;
        border: none;
        border-radius: 0.25rem;
        background-color: #9c27b0;
        color: white;
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
        transition: background-color 0.2s ease;
        margin: 0 auto; /* Center alignment */
    }

    .submit:hover {
        background-color: #7b1fa2;
    }

    .signin {
        font-size: 1rem;
        text-align: center;
        margin-top: 1.5rem;
    }

    .signin a {
        color: #9c27b0;
        text-decoration: none;
        transition: color 0.2s ease;
    }

    .signin a:hover {
        color: white;
    }

    /* Animation Keyframes */
    @keyframes slideInFromLeft {
        0% {
            transform: translateX(-100%);
            opacity: 0;
        }
        100% {
            transform: translateX(0);
            opacity: 1;
        }
    }

    @keyframes appear {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }

    /* Apply Animations */
    .form {
        animation: slideInFromLeft 1s ease-out;
    }

    .title {
        animation: appear 2s ease-out;
    }

    .message {
        animation: appear 3s ease-out;
    }


</style>
<body>
<form class="form" action="../register" method="post">
    <p class="title">Register</p>
    <p class="message">Signup now and get full access to our app.</p>
    <div class="form-group">
        <input class="input" type="text" name="username" placeholder="" required="">
        <span>Username</span>
    </div>
    <div class="form-group">
        <input class="input" type="password" name="password" placeholder="" required="">
        <span>Password</span>
    </div>
    <div class="form-group">
        <input class="input" type="password" name="confirm_password" placeholder="" required="">
        <span>Confirm Password</span>
    </div>
    <button class="submit">Submit</button>
    <p class="signin">Already have an account? <a href="login.jsp">Sign In</a></p>
</form>
<script>
    document.querySelector('.form').addEventListener('submit', function(event) {
        var password = document.querySelector('input[name="password"]').value;
        var confirm_password = document.querySelector('input[name="confirm_password"]').value;

        if (password !== confirm_password) {
            event.preventDefault(); // 阻止表单提交
            alert('密码不匹配，请重新输入。');
        }
    });
</script>
</body>
</html>
